<script lang="ts">
import { h, PropType, reactive, watchEffect } from "vue"
import { TableCell, HeaderStyle, TableAlign } from "@types"

export default {
   name: "STable",
   props: {
      dataSource: {
         type: Array as PropType<TableCell[]>,
         default: () => []
      },
      headerStyle: Object as PropType<HeaderStyle>,
      layout: {
         type: String,
         default: "horizon"
      },
      align: {
         type: String as PropType<TableAlign>,
         default: "left"
      },
      hightlight: Boolean
   },

   setup (props, context) {
      if (!context.slots || !context.slots.default) return null
      let slots = reactive<any[]>([])

      watchEffect(() => {
         if (!context.slots || !context.slots.default) return null
         slots = context.slots.default().map((slot) => ({
            ...slot,
            props: {
               ...props,
               ...slot.props
            }
         }))
      })

      if (props.layout === "column") {
         return () =>
            h(
               "div",
               {
                  className: "s-table-wrap"
               },
               [h("div", { className: "s-table table-layout-column" }, slots)]
            )
      } else {
         return () =>
            h(
               "div",
               {
                  className: "s-table-wrap"
               },
               [h("div", { className: "s-table table-layout-horizon" }, slots)]
            )
      }
   }
}
</script>

<style lang="less">
   .s-table-wrap {
      overflow: auto;
      position: relative;
      .s-table {
         border-radius: @smallRadius;
         &.table-layout-horizon {
            display: grid;
            .table-columns {
               display: flex;
               .table-cell {
                  flex: 1;
               }
               .table-title,.table-cell {
                  border-right: 1px dotted @borderColor;
                  border-bottom: 1px dotted @borderColor;
               }
               .table-title{
                  background-color: @default;
                  font-size: @middleSize;
               }
               &:first-child {
                  .table-cell {
                     background-color: @default;
                     font-size: @middleSize;
                     border-bottom: 1px dotted @borderColor;
                     &:nth-child(n + 3) {
                        border-left: 1px dotted @borderColor;
                     }
                  }
               }
            }
         }
      }
   }

   .s-table-wrap{
      overflow-y: auto;
      .s-table {
         border-radius: @smallRadius;
         &.table-layout-column {
            display: flex;
            .table-columns {
               display: flex;
               flex-direction: column;
               // flex: 1;
               &:nth-child(n + 3) {
                  .table-cell {
                     border-top: 1px dotted @borderColor;
                  }
               }
               .table-title {
                  white-space: nowrap;
                  border-bottom: 1px dotted @borderColor;
                  background-color: @default;
                  position: relative;
               }
               .table-cell {
                  flex: 1;
               }
            }
         }
      }
   }

</style>
